<script setup>
import { ref, watch, computed } from "vue";

const props = defineProps({
    modelValue: {
        // 接受多种类型，根据实际值进行处理
        type: [Array, Object, String, null],
        default: () => []
    }
});

// 使用计算属性处理 modelValue
const processedModelValue = computed(() => {
    if (!props.modelValue) return [];
    if (typeof props.modelValue === 'string') return [];
    if (Array.isArray(props.modelValue)) return props.modelValue;
    return [];
});

const menuList = ref([]);

// 初始化菜单列表
menuList.value = processedModelValue.value;

// 监控 modelValue 的变化
watch(() => props.modelValue, () => {
    menuList.value = processedModelValue.value;
}, { immediate: true });

const appendMenuItem = () => {
    menuList.value.push({
        name: '',
        price: 0,
        remark: ''
    });
    handleConfirm();
}

const removeMenuItem = (index) => {
    menuList.value.splice(index, 1);
    handleConfirm();
}

const removeAllMenuItem = () => {
    menuList.value = [];
    handleConfirm();
}

const moveUp = (row) => {
    const index = menuList.value.indexOf(row);
    if (index > 0) {
        [menuList.value[index], menuList.value[index - 1]] = [menuList.value[index - 1], menuList.value[index]];
        handleConfirm();
    }
}

const moveDown = (row) => {
    const index = menuList.value.indexOf(row);
    if (index < menuList.value.length - 1) {
        [menuList.value[index], menuList.value[index + 1]] = [menuList.value[index + 1], menuList.value[index]];
        handleConfirm();
    }
}

const emit = defineEmits(['update:modelValue']);

const handleConfirm = () => {
    emit('update:modelValue', menuList.value);
}
</script>

<template>
    <div class="banquet-menu">
        <div class="menu-header">
            <el-button type="primary" @click="appendMenuItem">添加菜单</el-button>
            <el-button type="danger" @click="removeAllMenuItem">删除所有</el-button>
            <el-button type="warning" @click="handleConfirm">确定</el-button>
        </div>
        <el-table :data="menuList" border>
            <el-table-column prop="name" label="菜单名称">
                <template #default="{row}">
                    <el-input v-model="row.name" placeholder="请输入菜单名称"/>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="价格">
                <template #default="{row}">
                    <el-input v-model="row.price" placeholder="请输入价格"/>
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注">
                <template #default="{row}">
                    <el-input v-model="row.remark" placeholder="请输入备注"/>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{row}">
                    <el-button type="primary" @click="moveUp(row)" icon="ArrowUp" circle></el-button>
                    <el-button type="primary" @click="moveDown(row)" icon="ArrowDown" circle></el-button>
                    <el-button type="danger" @click="removeMenuItem(row.index)" icon="Delete" circle></el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<style scoped>
.banquet-menu {
    width: 100%;
}
.menu-header {
    padding-bottom: 10px;
}


</style>
